<template>
  <div class="sourceManage">
    <el-dialog title="同步日志" :visible.sync="dialogTableVisible">
      <!-- <el-form :model="operateLog">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="operateLog.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>-->
      <div class="item">
        <span>任务名称 : {{ operateLog.jobName }}</span>
      </div>
      <div class="item">
        <span>同步数据量 : {{ operateLog.dataSize }}</span>
      </div>
      <div class="item">
        <span>同步数据条数 : {{ operateLog.dataNumber }}</span>
      </div>
      <div class="item">
        <span>所用时间 : {{ operateLog.operationTime }}</span>
      </div>
      <!-- <div class="item">
        <span>平均同步速率:222</span>
      </div>-->
    </el-dialog>
    <el-card class="box-card">
      <el-scrollbar wrapClass="scrollbar-wrapper">
        <el-form :inline="true" class="demo-form-inline" size="mini" v-model="queryForm">
          <el-row>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-plus" @click="showFormEvent()">新增任务</el-button>
              <!-- <el-button size="small" type="primary"  @click="showFormEvent()">刷新</el-button> -->
              <!-- <el-button size="small" type="warning"  @click="showFormEvent()">删除</el-button> -->
            </el-form-item>
          </el-row>
          <el-form-item label="任务名称">
            <el-input size="small" v-model="queryForm.jobName" placeholder="任务名称" clearable></el-input>
          </el-form-item>
          <!-- <el-form-item label="启用状态">
            <el-select v-model="queryForm.jobState" clearable placeholder="请选择">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="创建时间">
            <el-date-picker v-model="queryForm.createDate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="searchEvent">搜索</el-button>
          </el-form-item>
        </el-form>
        <znxd-list :column="column" :page="page" :tableData="tableData" @handlePageChange="handlePageChange(page)" :pagination="true"></znxd-list>
      </el-scrollbar>
    </el-card>
    <!-- 表单弹出框 -->
    <dataFileDIalog :databaseFormVisible="databaseFormVisible" :initData="formData" @close="fromClose"></dataFileDIalog>
    <!-- 表单弹出框 -->
  </div>
</template>

<script >
import { enable, triggerTask } from "@/api/task/fileserver.js"
import { list, del } from "@/api/task/dataFile.js"
import { getDiction, formatTime } from "@/utils/config.js"
import dataFileDIalog from "./dataFileDIalog"

export default {
  components: {
    dataFileDIalog
  },
  data() {
    return {
      operateLog: {},
      dialogTableVisible: false,
      // 状态字典
      statusOptions: [
        {
          label: "启用",
          value: 1
        },
        {
          label: "禁用",
          value: 0
        }
      ],
      // 状态字典
      fileTypeOptions: [
        {
          label: "excel",
          value: 1
        },
        {
          label: "csv",
          value: 2
        }
      ],
      // 状态字典
      jobExecuteStatusOptions: [
        {
          label: "停止",
          value: 0
        },
        {
          label: "运行",
          value: 1
        }
      ],
      page: {
        pageNo: 1, // 当前位于哪页
        pageSize: 10, // 1页显示多少条
        total: 0
      },
      // 搜索条件
      queryForm: {
      },
      tableData: [],
      // 列表配置
      column: [
        {
          align: "center",
          name: "jobName",
          label: "任务名称",
          showOverflowTooltip: true
        },
        {
          align: "left",
          name: "jobDesc",
          label: "描述",
          showOverflowTooltip: true
        },
        // {
        //   align: "center",
        //   name: "isStart",
        //   label: "启用状态",
        //   width: 80,
        //   handleGetName: (code) => {
        //     return getDiction(this.statusOptions, code)
        //   }
        // },
        {
          align: "center",
          name: "fileType",
          label: "文件类型",
          width: 80,
          handleGetName: (code) => {
            return getDiction(this.fileTypeOptions, code)
          }
        },
        {
          align: "center",
          name: "createdate",
          label: "创建时间"
        },
        // {
        //   align: "center",
        //   name: "latestExecutionTime",
        //   label: "最近执行时间"
        // },
        // {
        //   align: "center",
        //   name: "jobCron",
        //   label: "执行周期"
        // },
        // {
        //   align: "center",
        //   name: "isExecution",
        //   label: "任务执行状态",
        //   width: 80,
        //   handleGetName: (code) => {
        //     return getDiction(this.jobExecuteStatusOptions, code)
        //   }
        // },
        // {
        //   align: "center",
        //   name: "available",
        //   label: "可用",
        //   width: 80,
        //   handleGetName: (code) => {
        //     let str = "";
        //     switch (code) {
        //       case 1:
        //         str = "可用";
        //         break;
        //       case 0:
        //         str = "不可用";
        //         break;
        //     }
        //     return str;
        //   }
        // },
        {
          align: "center",
          label: "操作",
          width: 300,
          buttons: [
            {
              label: "编辑",
              type: "primary",
              plain: false,
              size: "mini",
              handelClick: (row) => {
                this.showFormEvent(row)
              }
            },
            {
              label: "删除",
              type: "warning",
              plain: false,
              size: "mini",
              handelClick: (row) => {
                this.deleteEvent(row)
              }
            },
            {
              label: "配置",
              type: "danger",
              plain: true,
              size: "mini",
              handelClick: (row) => {
                this.setConfig(row)
              },
              handleGetVisible: (row) => {
                console.log("row", row);
                return row.sublimtStatus === 0;
              }
            },
            {
              label: "数据同步日志",
              type: "primary",
              plain: false,
              size: "mini",
              handelClick: (row) => {
                this.handleOperteLog(row)
              },
              handleGetVisible: (row) => {
                return row.sublimtStatus === 1;
              }
            }
          ]
        }
      ],
      // 表单管理
      databaseFormVisible: false,
      formData: {}
    }
  },
  methods: {
    // 列表操作
    searchEvent() {
      this.page.pageNo = 1
      this.getSourceData()
    },
    getSourceData() {
      let obj = {
        ...this.page,
        ...this.queryForm
      }
      delete obj.total
      if (obj.createDate) {
        obj.createDate = formatTime("yyyy-MM-dd", obj.createDate)
      }
      list(obj).then((res) => {
        // console.log(res)
        if (res.data.code === "200") {
          this.tableData = res.data.content
          this.page.total = res.data.total
        } else {
          this.$message({
            message: res.data.msg,
            type: "error"
          })
        }
      })
    },
    handlePageChange(page) {
      this.page = page
      this.getSourceData()
    },
    // form表单弹框操作
    fromClose() {
      this.databaseFormVisible = false
      this.getSourceData()
    },
    showFormEvent(row) {
      this.databaseFormVisible = true
      if (row) {
        this.formData = row
        let { id, jobDesc, jobName } = row
        this.formData = { id, jobDesc, jobName }
      } else {
        this.formData = {}
      }
    },
    // 二级操作
    deleteEvent(row) {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let obj = {
            id: row.id
          }
          del(obj)
            .then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  type: "success",
                  message: res.data.msg || "操作成功"
                })
                this.getSourceData()
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg
                })
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "操作失败"
              })
            })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    },
    handleOperteLog(row) {
      this.dialogTableVisible = true
      this.operateLog = row
    },
    setConfig(row) {
      this.$router.push({ path: "settingDataFile", query: { id: row.id } })
    }
    // setEvent(row, name, value) {
    //   let obj = {
    //     id: row.id,
    //     jobState: row.jobState === 1 ? 0 : 1
    //   }
    //   obj[name] = value
    //   enable(obj)
    //     .then((res) => {
    //       let data = res.data
    //       if (data.code === 200) {
    //         this.$message({
    //           type: "success",
    //           message: data.msg || "操作成功"
    //         })
    //         this.getSourceData()
    //       } else {
    //         this.$message({
    //           type: "error",
    //           message: data.msg
    //         })
    //       }
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "error",
    //         message: "操作失败"
    //       })
    //     })
    // }
    // // 执行任务
    // triggerTask(row) {
    //   let obj = {
    //     jobId: row.jobInfoId,
    //     isStart: true
    //   }
    //   triggerTask(obj)
    //     .then((res) => {
    //       let data = res.data
    //       if (data.code === 200) {
    //         this.$message({
    //           type: "success",
    //           message: data.msg || "操作成功"
    //         })
    //         this.getSourceData()
    //       } else {
    //         this.$message({
    //           type: "error",
    //           message: data.msg
    //         })
    //       }
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "error",
    //         message: "操作失败"
    //       })
    //     })
    // }
  },
  mounted() {
    this.getSourceData()
  }
};
</script>
<style lang="scss" scoped>
@import "../../../assets/style/style.scss";
@import "../../../assets/style/variable.scss";
</style>
<style lang="scss" scoped>
.sourceManage {
  .item {
    margin-bottom: 15px;
    font-size: 16px;
  }
}
</style>
